<template>
  <div class="sign">
    <div class="banner">
        <img src="http://files.wabei.cn/2022Vote/bannerV3.jpg" alt="">
    </div>
    <div class="signUp">
        <group  label-margin-right="2em" label-align="left">
          <x-input placeholder="姓名" v-model="formVal.name"></x-input>
          <x-input placeholder="职位" v-model="formVal.duty"></x-input>
          <x-input placeholder="手机号码" v-model="formVal.cellphone"></x-input>
          <div class="company-list">
            <x-input placeholder="股票简称 / 代码" @on-blur="loseFocus" @on-change="searchCompany" v-model="companyName"></x-input>
            <div x-arrow="" class="popper__arrow" style="left: 35px;"></div>
            <ul class="search_list" v-if="companyData && companyData.length>0">
              <li v-for="(item,key) in companyData" :key="key" @click="addCompany(item.companyName,item.stockCode)">{{item.companyName}}({{item.stockCode}})</li>
            </ul>
          </div>
        </group>
        <div class="join-list">
          <p>参选奖项</p>
          <checklist class="dongshi" label-position="right" :max="2" style="border-bottom:none;" :options="titleDongshi" v-model="checklistDongshi" ></checklist>
          <checklist class="qiye" label-position="right" :max="1" :options="title" v-model="checklist"></checklist>
        </div>
        <x-button  type="primary" button-primary-bg-color="red" @click.native="submit()">提交</x-button>    
    </div> 
  </div>
</template>
<script>

import {Group, XInput, XButton,Checklist,Toast,Popover} from 'vux'
export default {
  name:"signUp",
  data(){
    return {
      companyData:[],//通过股票代码简称拼音查询公司列表
      checklist:[],//企业报名
      checklistDongshi:[],//董事长报名
      companyName:"",
      flag:0,//标记被点击的是否是下面的列表，1是，0不是
      titleDongshi:[
        {
          key:1,
          value:"北交所·新三板杰出董事长"
        }
      ],
      title:[{
        key:2,
        value:"高新技术领军企业"
      },{
        key:3,
        value:"现代服务领军企业"
      },
      // {
      //   key:4,
      //   value:"数字营销领军企业"
      // },
      {
        key:5,
        value:"新一代信息技术领军企业"
      },
      // {
      //   key:7,
      //   value:"消费升级领军企业"
      // },
      {
        key:8,
        value:"智能制造领军企业"
      },{
        key:10,
        value:"医疗健康领军企业"
      },{
        key:11,
        value:"能源环保领军企业"
      }],
      formVal:{
        name:"",
        duty:"",
        cellphone:"",
        wxQQ:"",
        stockCode:"",
        projects:[]
      },
    }
  },
  components: {
    Group,
    XInput,
    XButton,
    Checklist,
    Toast,
    Popover 
  },
  methods:{
    addCompany(name,code){
      this.flag=1
      this.formVal.stockCode=code
      this.companyName=name
    },
    loseFocus(){
      setTimeout(() => {
        if(this.flag!==1){
          this.companyData=[]
        }
      }, 200);
    },
    searchCompany(){
      var that=this
      if(!that.companyName){
        return
      }
      this.$ajax.get(that.commenPath+"/vote/stock/"+that.companyName)
      .then(function(res){
       var data=res.data
       that.companyData=data.data
      })
      .catch(function(res){
        console.log(res)
      })
    },
    submit(){//提交年终评选
      var that=this
      if(!that.formVal.name){
       that.$vux.toast.text('请输入姓名！', 'middle')
       return
     }
     if(!that.formVal.cellphone || that.formVal.cellphone==""){
       that.$vux.toast.text('请输入手机号码！', 'middle')
       
        return
     }
     if(!(/^1(1|2|3|4|5|6|7|8|9)\d{9}$/.test(that.formVal.cellphone))){ 
      that.$vux.toast.text('手机号码格式有误，请重填！', 'middle')
      return
    }
     if(!that.formVal.stockCode){
       that.$vux.toast.text('请从列表中选择股票代码/简称！', 'middle')
       that.companyName=""
        return
     }
      that.formVal.projects=[]
      that.formVal.projects=that.formVal.projects.concat(that.checklistDongshi,that.checklist)
      that.formVal.projects.map(function(item,key){
      that.formVal.projects[key]={"ID":item}
     })
     if(that.formVal.projects.length<=0){
       that.$vux.toast.text('请选择参选奖项！', 'middle')
        return
     }
      that.$ajax.put(that.commenPath+"/vote/register/",that.formVal)
        .then(function(res){
          var data=res.data
          if(data.code==0){
            that.$vux.toast.text('提交成功！', 'middle')
            for(var k in that.formVal){
              if(k=="duty"){
                that.formVal[k]="董事长"
              }else if(k=="projects"){
                that.formVal[k]=[]
              }else{
                that.formVal[k]=""
              }
              that.companyName=""
              that.checklist=[]
              that.checklistDongshi=[]
            }
          }else{
            that.$vux.toast.text(data.message, 'middle')
          }
        })
        .catch(function(res){
          console.log(res)
        })
    }
  },
  mounted () {
				this.$router.afterEach((to, from, next) => {
						window.scrollTo(0, 0)
				})
		}
}
</script>
<style lang="scss" scoped>
.signUp{
  background-color: #efefef;
  padding:72px 50px 150px;
  .join-list{
    margin-top:40px;
    >p{
      font-size:30px;
      color: #898989;
      margin-top:0px;
      margin-bottom:16px;
      padding-left:20px;
    }
    
  }
}
.popper__arrow:after {
      position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    top: -22px;
    margin-left: -6px;
    border-top-width: 0;
    border-bottom-color: #fff;
    content: " ";
    border-width: 20px;
}
.company-list{position: relative;}
.popper__arrow {
      position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    top: 85px;
    left: 50%;
    margin-right: 3px;
    border-top-width: 0;
    border-bottom-color: #ebeef5;
}
.search_list{
  width:100%;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  max-height:260px;
  overflow-y: scroll;
  li{
    width:100%;
    line-height: 34px;
    font-size: 20px;
    padding:10px 0 10px 20px;
    background-color: #fff;
    :hover{
      background-color: #f5f7fa;
    }
  }
}

</style>
<style lang="scss">
.signUp .weui-cells_checkbox .weui-icon-checked:before{
  color: rgba(0,0,0,0);
}
.signUp .weui-icon-checked{
  display: inline-block;
  vertical-align: middle;
  width:40px;
  height:40px;
  line-height:40px;
  background-color: #fff;
  background: url("http://files.wabei.cn/img/no_seleted.png");
  background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover;
}
.signUp  .weui-cells_checkbox .weui-check:checked+.vux-checklist-icon-checked:before{
   display: inline-block;
  vertical-align: middle;
  width:40px;
  height:40px;
  line-height:40px;
  color: rgba(0,0,0,0) !important;
  margin:0px;
  padding:0px;
  vertical-align: top;
  background: url("http://files.wabei.cn/img/selected.png");
  background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover;
}
.signUp {
  .weui-cells_checkbox{
        border: 1px solid #DCDCDC;
        border-radius: 8px;
        padding:20px 44px;
        background-color: #fff !important;
        >.weui-cell{
          list-style: none;
          height: 76px;
          line-height: 76px;
          padding:0px !important;
         &:before{
           border:none;
         }
         .weui-cell__bd{
              color: #595757;
              font-size:30px;
              margin-left:30px;
            }
        }
    }
    .weui-btn_primary:not(.weui-btn_disabled):active, button.weui-btn{
      margin-top:80px;
    }
}
// .signUp .dongshi .weui-cells_checkbox{
//   border-bottom:none;
// }
// .signUp .qiye .weui-cells_checkbox{
//   border-top:none;
// }
</style>



